import React, { Component } from 'react';
import { observer, inject } from 'mobx-react';
import { withRouter, Route } from 'react-router-dom';
import { Tabs, WhiteSpace, Tools, List, Button, SearchBar, Icon, Avatar } from 'weaver-mobile';
import { Form, CKRichText, ListAdvanced, ListViewPage, CKTextarea, SearchAdvanced, RouteLayout } from 'weaver-mobile-page';
import { toJS } from 'mobx';
import _ from "lodash";

const getLabel = Tools.getLabel;

@inject('smsRadioStore')
@withRouter
@observer
export default class SmsReceive extends Component {
  constructor(props) {
    super(props);
    this.state = {
      receiverSearchVal: '',
      receiverId: ''
    }
  }

  componentDidMount() {
    const { smsRadioStore } = this.props;
    const { getReceiverAdvanceCondition, receiverGetData } = smsRadioStore;

    let param = this.props.history.location.search
    let id = param.substring(4)

    this.state.receiverId = id;
    receiverGetData({
      url: '/api/msgcenter/broadcast/mobile/getBroadcastReceiverList',
      method: 'post',
      params: { receiverid: id }
    });
    getReceiverAdvanceCondition();
  }

  //广播接收人高级搜索点击重置
  advancedReset = () => {
    const { smsRadioStore } = this.props;
    const { receiverSearch } = smsRadioStore;

    this.setState({ receiverSearchVal: '' })
    receiverSearch.form.resetFields();
  }

  //广播接收人高级搜索点击搜索
  advancedSubmit = () => {
    const { smsRadioStore } = this.props;
    const { receiverSearch, receiverListV, receiverGetData } = smsRadioStore;

    //整理高级搜索参数
    let allParams = receiverSearch.form.formParams;
    allParams.receiverid = this.state.receiverId;
    //清除列表数据
    receiverListV.clearData();
    //带参数请求列表数据
    receiverGetData({
      url: '/api/msgcenter/broadcast/mobile/getBroadcastReceiverList',
      method: 'post',
      params: allParams
    });
  }
  //接收人列表搜索框键盘enter回调
  searchSubmit = () => {
    const { receiverListV, receiverGetData } = this.props.smsRadioStore;

    let nameVal = this.state.receiverSearchVal;
    let id = this.state.receiverId
    //清除列表数据
    receiverListV.clearData();
    this.props.history.go(-1)
    setTimeout(function () {
      // 带参数请求列表数据
      receiverGetData({
        url: '/api/msgcenter/broadcast/mobile/getBroadcastReceiverList',
        method: 'post',
        params: { receiverid: id, name: nameVal }
      });
    }, 500);
  }
  searchBarFocus = () => {
    const { smsRadioStore } = this.props;
    const { receiverSearchLayout } = smsRadioStore;

    this.props.history.push(receiverSearchLayout.path);
  }

  // 自定义渲染模板
  getTemplate = () => {
    const newTemp = {
      default: [{
        key: 'col_1',
        render: (data) => {
          return (
            <div className="sms-radio-list-item" >
              <div className="sms-radio-list-item-pic">
                <Avatar
                  url={data.messagerurl}
                  name={data.tname}
                  type='2'
                />
              </div>
              <div className="sms-radio-list-item-infofo">
                <div className="sms-radio-list-item-info-name">
                  <div>{data.tname}</div>
                  <div>{data.jobname}</div>
                </div>
                <div className="sms-radio-list-item-info-department">
                  <div>{data.sbcname}</div>
                  <div>{data.dbtname}</div>
                </div>
              </div>
            </div>
          );
        },
      }],
    };
    return newTemp;
  }

  render() {
    const { smsRadioStore } = this.props;
    const { detailItem } = smsRadioStore;
    const { selectKey, setState, form, ckRichTextStore, listV, loading, receiverSearch, receiverListV, receiverSearchLayout } = smsRadioStore;
    const { formParams } = form;

    return (
      <div>
        <Route
          key={receiverSearchLayout.id}
          path={receiverSearchLayout.path}
          render={() => (
            <RouteLayout>
              <div
                key="searchRadioPage"
                className="wm-route-layout"
              >
                <div style={{ background: 'white', height: '100%', overflow: 'auto', width: '100%' }}>
                  <div className="sms-radio-search-page">
                    <SearchBar
                      value={this.state.receiverSearchVal}
                      className="search-select"
                      placeholder={getLabel('500351', '请输入关键字')}
                      onChange={val => this.setState({ receiverSearchVal: val }, receiverSearch.form.updateFields({ name: { value: val } }))}
                      onSubmit={this.searchSubmit}
                      ref={ref => { if (ref) { ref.focus() } }}
                    />
                  </div>
                </div>
              </div>
            </RouteLayout>
          )}
        />
        <SearchBar
          value={this.state.receiverSearchVal}
          className="search-select"
          placeholder={getLabel('500351', '请输入关键字')}
          showExtraButton
          extraButton={[
            { key: 'advanced', show: <Icon key="filter-o" type="filter-o" /> },
          ]}
          // onChange={val => this.setState({receiverSearchVal:val},receiverSearch.form.updateFields({name: { value: val }})) }
          // onSubmit={this.searchSubmit}
          onExtraButtonClick={() => this.props.history.push(receiverSearch.path)}
          onFocus={() => this.searchBarFocus()}
        />
        <SearchAdvanced
          store={receiverSearch}
          onSubmit={this.advancedSubmit}
          onReset={this.advancedReset}
          onChange={(condition, value) => {
            if (condition.domkey[0] === 'name') {
              this.setState({ receiverSearchVal: value })
            }
          }}
        />
        <ListViewPage.Normal
          loading={loading}
          store={receiverListV}
          rowKey="tid"
          getTemplate={this.getTemplate}

        />
      </div>
    )
  }
}